import { PropType, defineComponent, getCurrentInstance, ref } from 'vue';
import {
  OutputFormatEnum,
  LanguageEnum,
  ModeEnum
} from '../../data/type';

export default defineComponent({
  name: 'CodeDiff',
  props: {
    /**
     * 模式
     * 字符 => char,
     * 单词 => word,
     * 图像 => image,
     * 文件 => file
     */
    mode: {
      type: String as PropType<ModeEnum>,
      default: ModeEnum.WORD
    },
    /** 变更前字符串 */
    oldString: {
      type: String,
      default: ''
    },
    /** 变更后字符串 */
    newString: {
      type: String,
      default: ''
    },
    /** 输出格式 */
    outputFormat: {
      type: String as PropType<OutputFormatEnum>,
      default: OutputFormatEnum.SIDE_BY_SIDE
    },
    /** 格式化代码类型 */
    language: {
      type: String as PropType<LanguageEnum>,
      default: LanguageEnum.PLAINTEXT
    },
    /** 去除空白字符 */
    trim: {
      type: Boolean,
      default: false
    },
    /** 最大高度 */
    maxHeight: {
      type: String,
      default: undefined
    },
    /** 文件名 */
    filename: {
      type: String,
      default: undefined
    },
    /** 相同部分的代码，最多显示的行数 */
    context: {
      type: [Number, String],
      default: 10
    }
  },
  setup(props) {
    const codeDiff = ref(null);
    const {
      proxy
    } = getCurrentInstance() as any;
    proxy.codeDiff = codeDiff.value
    return () => (
      <CodeDiff
        ref={codeDiff}
        old-string={props.oldString}
        new-string={props.newString}
        output-format={props.outputFormat}
        language={props.language}
        trim={props.trim}
        maxHeight={props.maxHeight}
        filename={props.filename}
        context={Number(props.context)}
        diffStyle={props.mode}
      ></CodeDiff>
    )
  }
})
